<template>
  <view class="container">
    <view class="price-des">
      <view class="top-text">
        <view class="first">
          <view class="title">价格说明</view>
          &nbsp;
          <view class="description">（计价方式: 上传文件后自动计算价格）</view>
        </view>

        <view class="second">
          <view class="text retraction">
            <text>本店全部使用【高端纸张】和【优质碳粉】打印。我们承诺，如果质量差，打印成品免费赠送 退还全款。高度保障文件隐私安全，大部分文件传输至打印全程无人工介入，无人工排版/检查。</text>
          </view>

          <view class="text retraction">
            <text>一般下单后当天发货，长沙发出，发中通快递，发出后多数地区2-3天收到。</text>
          </view>
        </view>
      </view>
    </view>

    <view class="base-price">
      <!-- 头部标题 -->
      <view class="title-box">
        <view class="title">基础价格</view>
        <view class="title">
          <u-radio-group v-model="pageSize" placement="row">
            <u-radio :customStyle="{marginLeft: '36rpx'}" v-for="(item, index) in pageSizeList" :key="index"
              :label="item.name" :name="item.name" shape="square" size="18" activeColor="#05C160">
            </u-radio>
          </u-radio-group>
        </view>
      </view>

      <!-- 剩余展示部分 -->
      <view class="mid-show">
        <view class="item">
          <view class="title">颜色</view>
          <view class="options">
            <view class="text">黑白</view>
            <view class="text">彩色</view>
            <view class="text">激光彩色</view>
          </view>
        </view>

        <view class="item">
          <view class="title">单页</view>
          <view class="options">
            <view class="text" v-show="pageSize === 'A4'">7分/页</view>
            <view class="text" v-show="pageSize === 'A3'">0.24元/页</view>
            <view class="text" v-show="pageSize === 'A4'">0.15元/页</view>
            <view class="text" v-show="pageSize === 'A3'">0.45元/页</view>
            <view class="text" v-show="pageSize === 'A4'">0.3元/页</view>
            <view class="text" v-show="pageSize === 'A3'">1.5元/页</view>
          </view>
        </view>

        <view class="item">
          <view class="title">双页</view>
          <view class="options">
            <view class="text" v-show="pageSize === 'A4'">5分/页</view>
            <view class="text" v-show="pageSize === 'A3'">0.3元/页</view>
            <view class="text" v-show="pageSize === 'A4'">0.1元/页</view>
            <view class="text" v-show="pageSize === 'A3'">0.3元/页</view>
            <view class="text" v-show="pageSize === 'A4'">0.3元/页</view>
            <view class="text" v-show="pageSize === 'A3'">1.2元/页</view>
          </view>
        </view>
      </view>
    </view>
    
    <view class="base-price binding-price">
      <!-- 头部标题 -->
      <view class="title-box">
        <view class="title">装订价格</view>
      </view>
    
      <!-- 剩余展示部分 -->
      <view class="mid-show">
        <view class="item">
          <view class="title">装订方式</view>
          <view class="options">
            <view class="text">订书针</view>
            <view class="text">骑马订</view>
            <view class="text">胶装(皮纹纸)</view>
            <view class="text">胶装(铜版纸)</view>
            <view class="text">铁圈装订</view>
          </view>
        </view>
    
        <view class="item">
          <view class="title">装订数量</view>
          <view class="options">
            <view class="text">2~150张纸</view>
            <view class="text">4~25张纸</view>
            <view class="text">8~350张纸</view>
            <view class="text">8~350张纸</view>
            <view class="text">10~100张纸</view>
          </view>
        </view>
    
        <view class="item">
          <view class="title">价格</view>
          <view class="options">
            <view class="text">0.2元/本</view>
            <view class="text">2元/本</view>
            <view class="text">3元/本</view>
            <view class="text">5元/本</view>
            <view class="text">6元/本</view>
          </view>
        </view>
      </view>
      
      <view class="bottom-tips-text">
        (1个文件打印10份以上装订8折)
      </view>
    </view>
    
    <view class="base-price price-cite">
      <!-- 头部标题 -->
      <view class="title-box">
        <view class="title">价格示例</view>
      </view>
      
      <view class="mid-show retraction" style="font-size: 13px;">
        打印100页黑白*0.05元=5元, 100页彩色*0.1元=10元, 合计支付15元
      </view>
      
      <view class="bottom-tips-text">
        (上传文件后自动计算价格)
      </view>
    </view>
    
    <view class="base-price express">
      <!-- 头部标题 -->
      <view class="title-box">
        <view class="title">快递费用</view>
      </view>
    
      <!-- 剩余展示部分 -->
      <view class="mid-show">
        <view class="item">
          <view class="title">地区</view>
          <view class="options">
            <view class="text">大部分地区</view>
            <view class="text">海南|内蒙古</view>
            <view class="text">新疆|西藏</view>
          </view>
        </view>
    
        <view class="item">
          <view class="title">订单金额</view>
          <view class="options">
            <view class="text">>10元</view>
            <view class="text">>10元</view>
            <view class="text">>10元</view>
          </view>
        </view>
    
        <view class="item">
          <view class="title">价格</view>
          <view class="options">
            <view class="text">0元</view>
            <view class="text">10元+</view>
            <view class="text">20元+</view>
          </view>
        </view>
      </view>
      
      <view class="bottom-tips-text">
        (非偏远地区满10元包邮)
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 单选框数据
        pageSizeList: [{
            name: 'A4',
            disabled: false
          },
          {
            name: 'A3',
            disabled: false
          }
        ],
        // 根据纸张大小选择不同展示价格
        pageSize: 'A4'
      };
    },

  }
</script>

<style lang="scss" scoped>
  .container {
    padding-bottom: 50rpx;

    .price-des {
      .top-text {
        width: 700rpx;
        background-color: #fff;
        border-radius: 20rpx;
        box-shadow: 2rpx 2rpx 4rpx 4rpx rgba(0, 0, 0, 0.1);
        margin: 0 auto;
        margin-top: 20rpx;
        padding-top: 20rpx;
        padding-bottom: 20rpx;

        .first {
          width: 600rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          margin: 0 auto;

          .title {
            font-size: 16px;
            font-weight: 400;
            vertical-align: middle;
            margin-top: 20rpx;
          }

          .description {
            font-size: 12px;
            color: #aaa;
            vertical-align: middle;
            margin-top: 20rpx;
          }
        }

        .second {
          display: flex;
          flex-direction: column;
          width: 600rpx;
          font-size: 13px;
          margin: 0 auto;

          .text {
            margin-top: 10rpx;
            margin-bottom: 10rpx;
          }
        }
      }
    }

    .base-price {
      width: 700rpx;
      background-color: #fff;
      border-radius: 20rpx;
      box-shadow: 2rpx 2rpx 4rpx 4rpx rgba(0, 0, 0, 0.1);
      margin: 0 auto;
      margin-top: 20rpx;
      padding-bottom: 20rpx;

      .title-box {
        width: 600rpx;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-top: 20rpx;

        .title {
          margin-top: 20rpx;
          font-size: 16px;
        }
      }

      .mid-show {
        width: 600rpx;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 20rpx;

        .item {
          width: 170rpx;
          text-align: center;
          font-size: 14px;
          padding-bottom: 20rpx;
          
          .title {
            color: #05C160;
            font-weight: 700;
            font-size: 16px;
          }

          .options {
            .text {
              margin-top: 32rpx;
            }
          }
        }
      }
    }

    .bottom-tips-text {
      width: 600rpx;
      margin: 0 auto;
      font-size: 12px;
      color: #aab;
      margin-top: 20rpx;
    }
    
    .retraction {
      text-indent: 2em;
    }
  }
</style>
